import React from 'react';
import cx from 'classnames';
import { Row, Col, Card } from 'antd';
import _get from 'lodash/get';

import styles from './FormCardViewComponent.less';


const FormCardViewComponent= props => {
  const { title: label, children = [], ratio = 12, childList = [] } = props;
  const hasChildren = Array.isArray(children) && children.length > 0;

  const renderChildren = () => {
    if (!hasChildren) return null;

    return (
      <Row type="flex" justify="start">
        {children.map((item, index) => {
          const span = _get(childList, `[${index}].props.ratio`, ratio);
          return (
            <Col key={index} span={span}>
              {item}
            </Col>
          );
        })}
      </Row>
    );
  };

  return (
    <Card className={styles.root} title={label}>
      <div
        className={cx(styles.content, { [styles.noChildren]: !hasChildren })}
      >
        {hasChildren ? (
          renderChildren()
        ) : (
          <span className={styles.empty}>可拖入多个组件(不包含容器组件)</span>
        )}
      </div>
    </Card>
  );
};

export default FormCardViewComponent;

